<template>
  <div id="businesses">
    <el-row v-show="disabled1" style="margin: auto;">
      <el-col :span="12">
        <el-form :model="businesses1"  label-width="80px" style="margin: auto;width: 900px;">
          <!--  图片 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="营业执照" prop="picture" class="color1">
                <el-upload
                    :disabled="true"
                    v-model="businesses1.license"
                    name="picture"
                    class="avatar-uploader"
                    action="http://localhost:9999/zhuche/image"
                    :show-file-list="false">
                  <img v-if="imageUrl1v1" :src="imageUrl1v1" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="门店" prop="picture" class="color1">
                <el-upload
                    :disabled="true"
                    v-model="businesses1.storePicture"
                    name="picture"
                    class="avatar-uploader"
                    action="http://localhost:9999/zhuche/image"
                    :show-file-list="false">
                  <img v-if="imageUrl1v2" :src="imageUrl1v2" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 店铺名和负责人-->
          <el-row>
            <el-col :span="6">
              <el-form-item label="店铺名" class="color1">
                <span>{{businesses1.storeName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="负责人" class="color1">
                <span class="type">{{businesses1.chargePerson}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 身份证和手机号码-->
          <el-row>
            <el-col :span="6">
              <el-form-item label="身份证" class="color1">
                <span class="type">{{businesses1.identityCard}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="手机号码" class="color1">
                <span>{{businesses1.phone}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 账号余额-->
          <el-row>
            <el-col :span="6">
              <el-form-item label="账号余额" class="color1">
                <template>
                  <span>{{businesses1.balance}}</span>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否营业" class="color1">
                <template>
                  <span>{{businesses1.isBusiness1}}</span>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 地址-->
          <el-row>
            <el-col :span="6">
              <el-form-item label="地址" class="color1">
                <template>
                  <span>{{businesses1.location}}</span>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item>
                <el-button style="width: 100px;background-color:#B3C0D1;border: gray"  @click="update1">修改</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
    <el-row v-show="disabled2"   style="margin: auto;">
      <el-col :span="12">
        <el-form :model="businesses2" :rules="rules"   label-width="80px" style="margin: auto;width: 900px;">
          <!--  图片 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="营业执照" prop="license" class="color1">
                <el-upload
                    v-model="businesses2.license"
                    name="picture"
                    class="avatar-uploader"
                    action="http://localhost:9999/zhuche/image"
                    :show-file-list="false"
                    :on-success="image1"
                    :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl2v1" :src="imageUrl2v1" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="门店" prop="storePicture" class="color1">
                <el-upload
                    v-model="businesses2.storePicture"
                    name="picture"
                    class="avatar-uploader"
                    action="http://localhost:9999/zhuche/image"
                    :show-file-list="false"
                    :on-success="image2"
                    :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl2v2" :src="imageUrl2v2" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 店铺名和负责人-->
          <el-row>
            <el-col :span="6">
              <el-form-item prop="storeName" label="店铺名" class="color1">
                <el-input v-model="businesses2.storeName" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item  prop="chargePerson" label="负责人" class="color1">
                <el-input v-model="businesses2.chargePerson"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 身份证和手机号码-->
          <el-row>
            <el-col :span="6">
              <el-form-item   prop="identityCard" label="身份证" class="color1">
                <el-input v-model="businesses2.identityCard"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item   prop="phone"  label="手机号码" class="color1">
                <el-input v-model="businesses2.phone"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 是否营业和账号余额-->
          <el-row>
            <el-col :span="6">
              <el-form-item label="账号余额"  class="color1">
                <template>
                  <el-input v-model="businesses2.balance" :disabled="true"></el-input>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否营业" class="color1">
                <template>
                  <el-input  v-model="businesses2.isBusiness1" :disabled="true"></el-input>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 地址-->
          <el-row>
            <el-col :span="6">
              <el-form-item  prop="location" label="地址" class="color1">
                <template>
                  <el-input v-model="businesses2.location"></el-input>
                </template>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" @click="update2">完成</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="danger"  @click="update3">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>


  </div>
</template>
<script>
export default {

  name: "businesses",
  data() {
    return {
      //控制商户个人信息的显示
      disabled1:true,
      disabled2:false,

      //商户个人信息
      businesses1:{
        auditOpinion: "",
        balance: 0,
        chargePerson: "",
        checkTag: "",
        check_time: "",
        id: 0,
        identityCard: "",
        isBusiness: 0,
        license: "",
        location: "",
        phone: "",
        storeName: "",
        storePicture: "",
        userId: 0,
        //营业状态
        isBusiness1:'',
      },
      businesses2:{
        auditOpinion: "",
        balance: 0,
        chargePerson: "",
        checkTag: "",
        check_time: "",
        id: 0,
        identityCard: "",
        isBusiness: 0,
        license: "",
        location: "",
        phone: "",
        storeName: "",
        storePicture: "",
        userId: 0,
        //营业状态
        isBusiness1:'',
      },

      // 图片地址
      imageUrl1v1: '',
      imageUrl1v2: '',

      imageUrl2v1: '',
      imageUrl2v2: '',

      //
      uid:window.sessionStorage.getItem('userId1'),


      rules: {
        license: [
          { required: true, message: '请上传图片', trigger: 'change' }
        ],
        storePicture: [
          { required: true, message: '请上传图片', trigger: 'change' }
        ],
        storeName: [
          { required: true, message: '店铺名不能为空', trigger: 'blur' }
            ,
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        chargePerson: [
          { required: true, message: '负责人不能为空', trigger: 'blur' }
        ],
        identityCard:[
          { required: true, message: '身份证不能为空', trigger: 'blur' }
          ,
          { min: 18, max: 18, message: '身份证长度错误', trigger: 'blur' }
        ],
        phone:[
          { required: true, message: '手机号码不能为空', trigger: 'blur' }
          ,
          { min: 11, max: 11, message: '手机号码长度错误', trigger: 'blur' }
        ],
        location:[
          { required: true, message: '地址1不能为空', trigger: 'blur' }
        ]
      },
    };
  },
  methods:{
    select() {
   this.$axios.post(`Businesses/${this.uid}`).then(r => {

     this.businesses1=r.data;
     console.log("data",r.data)
     this.imageUrl1v1=this.businesses1.license;
     this.imageUrl2v1=this.businesses1.license;

     this.imageUrl1v2=this.businesses1.storePicture;
     this.imageUrl2v2=this.businesses1.storePicture;


     this.businesses1.isBusiness===1?this.businesses1.isBusiness1="营业中":this.businesses1.isBusiness1="暂停营业";
     console.log("this.isBusiness1",this.businesses1.isBusiness1)
      })
    },
    //点编辑
    update1(){
      this.businesses2=this.businesses1;
      this.disabled1=false;
      this.disabled2=true;
    },
    //修改
    update2(){
      this.$axios.put(`Businesses/update`,this.businesses2).then(r => {
        console.log("data",r.data)
        if(r.data==="ok"){
          this.$message({
            type:"success",
            message:"修改成功"
          });
        }else {
          this.$message({
            type: "no",
            message: "修改失败"
          });
        }
      })
      this.select();
      this.disabled1=true;
      this.disabled2=false;

    },
    //取消
    update3(){
      this.disabled1=true;
      this.disabled2=false;
      this.select()
    },
    //图片上传前
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      const isJPG = file.type
      const isLt2M = file.size / 1024 / 1024 < 2;


      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //营业执照图片上传后
    image1(rel){
      console.log("rel",rel)
      this.imageUrl2v1=rel
      this.businesses2.license=this.imageUrl2v1
    },
    //门店图片上传后
    image2(rel){
      console.log("rel",rel)
      this.imageUrl2v2=rel
      this.businesses2.storePicture=this.imageUrl2v2
    },

  },
  created() {
    this.select();
  },
}
</script>
<style scoped>

</style>